<template>
  <div class="key" v-if="userData.key_num.unused" @click="action">
    <img src="@/assets/box/token.png" class="animate__animated animate__infinite animate__slow animate__tada" />
  </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import { userData, userInfo } from '@/model/user'
import { toast } from '@/style'
import { t } from '@/lang'
import { open } from '@/api/box'

const emit = defineEmits(['load', 'over'])

// 开始开盒
const action = () => {
  emit('load')
  open(1).then(res => {
    emit('over')
    userInfo()
  }).catch(err => {
    toast(err.message)
  })
}

</script>
<style lang="scss">
  .key{
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 110px;
    right: -50px;
    
    img{
      width: 100%;
    }
  }
</style>